```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会话管理与多设备登录解决方案</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 0.65;
            margin: 0.1em 0.2em 0 0;
            color: #3a7bd5;
            font-weight: bold;
        }
        .section-divider {
            border: none;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
        }
        .token-flow {
            background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
            border-radius: 12px;
        }
        .mermaid {
            background: #f8fafc;
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-4 md:px-8">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">现代会话管理与多设备登录解决方案</h1>
                    <p class="text-xl opacity-90 mb-8">实现安全、便捷的多设备统一身份认证体验</p>
                    <div class="flex space-x-4">
                        <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-all">
                            <i class="fas fa-book-open mr-2"></i>了解更多
                        </button>
                        <button class="bg-transparent border border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition-all">
                            <i class="fas fa-code mr-2"></i>查看代码
                        </button>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="w-full max-w-md bg-white/20 backdrop-blur-sm rounded-xl p-6 border border-white/20">
                        <div class="flex justify-between items-center mb-4">
                            <div class="flex items-center">
                                <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                                <div class="w-3 h-3 bg-yellow-400 rounded-full mr-2"></div>
                                <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                            </div>
                            <div class="text-sm opacity-80">OAuth 2.0 令牌管理</div>
                        </div>
                        <div class="bg-white/10 rounded-lg p-4 mb-4">
                            <div class="flex items-center mb-2">
                                <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3">
                                    <i class="fas fa-user"></i>
                                </div>
                                <div>
                                    <div class="font-medium">用户ID: user123</div>
                                    <div class="text-xs opacity-70">最后活动: 2分钟前</div>
                                </div>
                            </div>
                            <div class="ml-11">
                                <div class="flex items-center text-sm py-1">
                                    <i class="fas fa-mobile-alt mr-2 text-blue-300"></i>
                                    <span>iPhone 13 (192.168.1.1)</span>
                                </div>
                                <div class="flex items-center text-sm py-1">
                                    <i class="fas fa-laptop mr-2 text-blue-300"></i>
                                    <span>MacBook Pro (192.168.1.2)</span>
                                </div>
                                <div class="flex items-center text-sm py-1">
                                    <i class="fas fa-tablet-alt mr-2 text-blue-300"></i>
                                    <span>iPad Air (192.168.1.3)</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <button class="text-xs bg-white/20 hover:bg-white/30 px-3 py-1 rounded transition">
                                <i class="fas fa-sign-out-alt mr-1"></i>注销所有
                            </button>
                            <button class="text-xs bg-white text-blue-600 hover:bg-gray-100 px-3 py-1 rounded transition">
                                <i class="fas fa-plus mr-1"></i>添加设备
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-6xl mx-auto px-4 md:px-8 py-16">
        <!-- Introduction -->
        <div class="mb-16">
            <p class="drop-cap text-lg text-gray-700 leading-relaxed">通过合理的会话管理和令牌处理策略，可以有效地解决单点登录和多设备登录问题。允许用户在多个设备上同时登录的同时，也要确保系统的安全性和用户体验。合理的设计和实现策略能够在提升用户便利性的同时，确保系统的稳定性和安全性。</p>
        </div>

        <hr class="section-divider my-12">

        <!-- Section 1 -->
        <div class="grid md:grid-cols-12 gap-8 mb-16">
            <div class="md:col-span-4">
                <div class="sticky top-8">
                    <span class="text-blue-500 font-bold text-sm tracking-wider mb-2 inline-block">01</span>
                    <h2 class="text-3xl font-bold mb-4">使用单点登录（SSO）解决方案</h2>
                    <p class="text-gray-600 mb-4">单点登录（SSO）允许用户只需登录一次即可访问多个系统或应用程序，极大提升用户体验。</p>
                    <div class="flex space-x-2">
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">OAuth 2.0</span>
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">OpenID Connect</span>
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">SAML</span>
                    </div>
                </div>
            </div>
            <div class="md:col-span-8">
                <div class="bg-white rounded-xl shadow-sm p-8 card-hover">
                    <h3 class="text-2xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-sign-in-alt text-blue-500 mr-3"></i>
                        单点登录概述
                    </h3>
                    <p class="text-gray-700 mb-6">单点登录（SSO）允许用户只需登录一次即可访问多个系统或应用程序。常见的 SSO 实现技术包括 OAuth 2.0、OpenID Connect、SAML 等。</p>
                    
                    <h3 class="text-2xl font-semibold mt-8 mb-4 flex items-center">
                        <i class="fas fa-mobile-alt text-blue-500 mr-3"></i>
                        解决多个设备登录问题
                    </h3>
                    <p class="text-gray-700 mb-4">在实施 SSO 的情况下，需要管理用户会话和设备的登录状态。可以考虑以下措施：</p>
                    <ul class="space-y-3 mb-6">
                        <li class="flex items-start">
                            <div class="bg-blue-100 text-blue-500 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3">
                                <i class="fas fa-check text-xs"></i>
                            </div>
                            <span class="text-gray-700"><strong>会话管理</strong>：确保每个用户在所有设备上的会话是独立的。使用统一的会话管理系统来控制和同步用户的登录状态。</span>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-blue-100 text-blue-500 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3">
                                <i class="fas fa-check text-xs"></i>
                            </div>
                            <span class="text-gray-700"><strong>令牌管理</strong>：使用访问令牌（Access Token）和刷新令牌（Refresh Token）来维护会话状态。刷新令牌可以用于延续会话，而访问令牌用于实际的身份验证。</span>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-blue-100 text-blue-500 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3">
                                <i class="fas fa-check text-xs"></i>
                            </div>
                            <span class="text-gray-700"><strong>设备绑定</strong>：允许用户在多个设备上登录，但可以在系统中为每个设备生成独立的令牌。这样，每个设备上的会话都是独立的。</span>
                        </li>
                    </ul>

                    <!-- Token Flow Diagram -->
                    <div class="token-flow p-6 rounded-lg mb-6">
                        <h4 class="font-semibold text-lg mb-4 flex items-center">
                            <i class="fas fa-project-diagram text-blue-500 mr-2"></i>
                            令牌流程示意图
                        </h4>
                        <div class="mermaid">
                            graph LR
                            A[用户] -->|1. 登录请求| B(认证服务器)
                            B -->|2. 颁发Token| A
                            A -->|3. 携带Token| C[资源服务器]
                            C -->|4. 验证Token| B
                            B -->|5. 返回验证结果| C
                            C -->|6. 返回资源| A
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <hr class="section-divider my-12">

        <!-- Section 2 -->
        <div class="grid md:grid-cols-12 gap-8 mb-16">
            <div class="md:col-span-4">
                <div class="sticky top-8">
                    <span class="text-blue-500 font-bold text-sm tracking-wider mb-2 inline-block">02</span>
                    <h2 class="text-3xl font-bold mb-4">实现多设备同时登录</h2>
                    <p class="text-gray-600 mb-4">为用户提供无缝的多设备体验，同时保持安全性和会话一致性。</p>
                    <div class="flex space-x-2">
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">多会话</span>
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">令牌管理</span>
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">设备管理</span>
                    </div>
                </div>
            </div>
            <div class="md:col-span-8">
                <div class="bg-white rounded-xl shadow-sm p-8 card-hover">
                    <h3 class="text-2xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-laptop-house text-blue-500 mr-3"></i>
                        允许多设备登录
                    </h3>
                    <p class="text-gray-700 mb-6">为了允许用户在多个设备上同时登录，可以使用以下方法：</p>
                    
                    <div class="grid md:grid-cols-2 gap-6 mb-8">
                        <div class="bg-gray-50 p-5 rounded-lg border border-gray-100">
                            <div class="text-blue-500 text-2xl mb-3">
                                <i class="fas fa-user-clock"></i>
                            </div>
                            <h4 class="font-semibold mb-2">多会话支持</h4>
                            <p class="text-gray-600 text-sm">设计系统以支持用户在多个设备上同时存在多个会话。每个设备都有独立的会话ID。</p>
                        </div>
                        <div class="bg-gray-50 p-5 rounded-lg border border-gray-100">
                            <div class="text-blue-500 text-2xl mb-3">
                                <i class="fas fa-key"></i>
                            </div>
                            <h4 class="font-semibold mb-2">令牌管理</h4>
                            <p class="text-gray-600 text-sm">每个设备使用独立的访问令牌和刷新令牌。这些令牌在后台进行管理和验证。</p>
                        </div>
                        <div class="bg-gray-50 p-5 rounded-lg border border-gray-100">
                            <div class="text-blue-500 text-2xl mb-3">
                                <i class="fas fa-user-cog"></i>
                            </div>
                            <h4 class="font-semibold mb-2">用户界面提示</h4>
                            <p class="text-gray-600 text-sm">在用户的个人信息设置中提供查看和管理当前登录设备的功能。</p>
                        </div>
                        <div class="bg-gray-50 p-5 rounded-lg border border-gray-100">
                            <div class="text-blue-500 text-2xl mb-3">
                                <i class="fas fa-sync-alt"></i>
                            </div>
                            <h4 class="font-semibold mb-2">会话同步</h4>
                            <p class="text-gray-600 text-sm">同步不同设备上的会话状态，确保用户体验的一致性。</p>
                        </div>
                    </div>

                    <!-- Code Example -->
                    <div class="bg-gray-800 rounded-lg overflow-hidden mb-6">
                        <div class="flex items-center px-4 py-2 bg-gray-700 text-gray-300">
                            <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                            <div class="w-3 h-3 bg-yellow-400 rounded-full mr-2"></div>
                            <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
                            <span class="text-sm">DeviceSessionManager.java</span>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto text-sm">
<code>public class DeviceSessionManager {
    // 存储设备会话信息
    private Map&lt;String, List&lt;DeviceSession&gt;&gt; userSessions = new ConcurrentHashMap<>();
    
    // 创建新设备会话
    public DeviceSession createSession(String userId, String deviceId) {
        DeviceSession session = new DeviceSession(
            UUID.randomUUID().toString(),
            deviceId,
            System.currentTimeMillis(),
            System.currentTimeMillis() + 3600_000 // 1小时过期
        );
        
        userSessions.computeIfAbsent(userId, k -> new CopyOnWriteArrayList<>())
                   .add(session);
        return session;
    }
    
    // 验证会话有效性
    public boolean validateSession(String userId, String sessionId) {
        List&lt;DeviceSession&gt; sessions = userSessions.get(userId);
        if (sessions == null) return false;
        
        return sessions.stream()
                      .anyMatch(s -> s.getSessionId().equals(sessionId) 
                                 && s.getExpiryTime() > System.currentTimeMillis());
    }
    
    // 删除特定设备会话
    public void removeSession(String userId, String deviceId) {
        List&lt;DeviceSession&gt; sessions = userSessions.get(userId);
        if (sessions != null) {
            sessions.removeIf(s -> s.getDeviceId().equals(deviceId));
        }
    }
}</code></pre>
                    </div>
                </div>
            </div>
        </div>

        <hr class="section-divider my-12">

        <!-- Section 3 -->
        <div class="grid md:grid-cols-12 gap-8 mb-16">
            <div class="md:col-span-4">
                <div class="sticky top-8">
                    <span class="text-blue-500 font-bold text-sm tracking-wider mb-2 inline-block">03</span>
                    <h2 class="text-3xl font-bold mb-4">保证安全性</h2>
                    <p class="text-gray-600 mb-4">安全是多设备登录方案中的首要考虑因素，需要多重保护措施。</p>
                    <div class="flex space-x-2">
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">令牌过期</span>
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">刷新机制</span>
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">设备验证</span>
                    </div>
                </div>
            </div>
            <div class="md:col-span-8">
                <div class="bg-white rounded-xl shadow-sm p-8 card-hover">
                    <div class="grid md:grid-cols-2 gap-8">
                        <div>
                            <h3 class="text-xl font-semibold mb-3 flex items-center">
                                <i class="fas fa-clock text-blue-500 mr-2"></i>
                                过期策略
                            </h3>
                            <p class="text-gray-700 mb-4">设定合适的令牌过期策略，确保令牌在一定时间内无效，以减少被滥用的风险。</p>
                            <ul class="text-gray-600 text-sm space-y-2">
                                <li class="flex items-start">
                                    <i class="fas fa-circle text-xs text-blue-500 mt-1 mr-2"></i>
                                    <span>访问令牌: 短有效期(15-60分钟)</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-circle text-xs text-blue-500 mt-1 mr-2"></i>
                                    <span>刷新令牌: 较长有效期(7-30天)</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-circle text-xs text-blue-500 mt-1 mr-2"></i>
                                    <span>会话令牌: 根据安全需求设置</span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-3 flex items-center">
                                <i class="fas fa-sync-alt text-blue-500 mr-2"></i>
                                刷新机制
                            </h3>
                            <p class="text-gray-700 mb-4">使用刷新令牌机制来重新获取新的访问令牌。这样可以减少频繁的登录请求，同时保证安全性。</p>
                            <div class="mermaid">
                                sequenceDiagram
                                    participant U as 用户设备
                                    participant A as 认证服务器
                                    U->>A: 使用刷新令牌请求新访问令牌
                                    A->>A: 验证刷新令牌有效性
                                    A->>U: 返回新访问令牌
                                    U->>U: 更新本地存储的令牌
                            </div>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-3 flex items-center">
                                <i class="fas fa-fingerprint text-blue-500 mr-2"></i>
                                设备验证
                            </h3>
                            <p class="text-gray-700 mb-4">实现设备指纹识别技术，以便更好地识别和管理用户的登录设备。</p>
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <div class="text-sm font-medium text-gray-700 mb-2">设备指纹可能包括:</div>
                                <ul class="text-gray-600 text-sm space-y-1">
                                    <li><i class="fas fa-desktop mr-1 text-blue-500"></i> 设备型号/浏览器信息</li>
                                    <li><i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> IP地址/地理位置</li>
                                    <li><i class="fas fa-id-badge mr-1 text-blue-500"></i> 操作系统版本</li>
                                    <li><i class="fas fa-plug mr-1 text-blue-500"></i> 安装的插件/字体</li>
                                    <li><i class="fas fa-tachometer-alt mr-1 text-blue-500"></i> 硬件配置信息</li>
                                </ul>
                            </div>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-3 flex items-center">
                                <i class="fas fa-shield-alt text-blue-500 mr-2"></i>
                                安全最佳实践
                            </h3>
                            <ul class="text-gray-700 space-y-3">
                                <li class="flex items-start">
                                    <div class="bg-blue-100 text-blue-500 rounded-full w-5 h-5 flex items-center justify-center flex-shrink-0 mr-2">
                                        <i class="fas fa-lock text-xs"></i>
                                    </div>
                                    <span>使用HTTPS传输所有令牌</span>
                                </li>
                                <li class="flex items-start">
                                    <div class="bg-blue-100 text-blue-500 rounded-full w-5 h-5 flex items-center justify-center flex-shrink-0 mr-2">
                                        <i class="fas fa-eraser text-xs"></i>
                                    </div>
                                    <span>令牌使用后立即从内存中清除</span>
                                </li>
                                <li class="flex items-start">
                                    <div class="bg-blue-100 text-blue-500 rounded-full w-5 h-5 flex items-center justify-center flex-shrink-0 mr-2">
                                        <i class="fas fa-ban text-xs"></i>
                                    </div>
                                    <span>实现令牌黑名单机制</span>
                                </li>
                                <li class="flex items-start">
                                    <div class="bg-blue-100 text-blue-500 rounded-full w-5 h-5 flex items-center justify-center flex-shrink-0 mr-2">
                                        <i class="fas fa-bell text-xs"></i>
                                    </div>
                                    <span>异常登录行为告警</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <hr class="section-divider my-12">

        <!-- Section 4 -->
        <div class="grid md:grid-cols-12 gap-8 mb-16">
            <div class="md:col-span-4">
                <div class="sticky top-8">
                    <span class="text-blue-500 font-bold text-sm tracking-wider mb-2 inline-block">04</span>
                    <h2 class="text-3xl font-bold mb-4">防止重复登录问题</h2>
                    <p class="text-gray-600 mb-4">确保用户账号不会被滥用，同时提供合理的会话管理选项。</p>
                    <div class="flex space-x-2">
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">强制退出</span>
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">会话同步</span>
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">用户通知</span>
                    </div>
                </div>
            </div>
            <div class="md:col-span-8">
                <div class="bg-white rounded-xl shadow-sm p-8 card-hover">
                    <div class="flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8">
                        <div class="md:w-1/2">
                            <h3 class="text-xl font-semibold mb-4 flex items-center">
                                <i class="fas fa-sign-out-alt text-blue-500 mr-2"></i>
                                强制退出机制
                            </h3>
                            <p class="text-gray-700 mb-4">为用户提供一种机制，在新设备登录时可以选择是否强制退出其他设备的会话。这可以通过后台的会话管理系统实现。</p>
                            
                            <div class="bg-blue-50 border border-blue-100 rounded-lg p-4 mb-6">
                                <div class="flex items-center mb-2">
                                    <div class="bg-blue-100 text-blue-600 rounded-full w-8 h-8 flex items-center justify-center mr-3">
                                        <i class="fas fa-exclamation"></i>
                                    </div>
                                    <div class="font-medium">安全提示</div>
                                </div>
                                <p class="text-sm text-gray-700">检测到您的账号已在其他设备登录，您可以选择：</p>
                                <div class="flex space-x-2 mt-3">
                                    <button class="text-xs bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition">
                                        强制退出其他设备
                                    </button>
                                    <button class="text-xs bg-white border border-gray-300 px-3 py-1 rounded hover:bg-gray-50 transition">
                                        保持同时登录
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="md:w-1/2">
                            <h3 class="text-xl font-semibold mb-4 flex items-center">
                                <i class="fas fa-bell text-blue-500 mr-2"></i>
                                用户通知策略
                            </h3>
                            <p class="text-gray-700 mb-4">在用户登录的新设备时，通知用户其账号已在其他设备上登录。用户可以选择是否继续在当前设备上使用或退出其他设备上的会话。</p>
                            
                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                                <div class="flex items-start mb-2">
                                    <div class="bg-blue-100 text-blue-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">
                                        <i class="fas fa-envelope"></i>
                                    </div>
                                    <div>
                                        <div class="font-medium mb-1">新登录通知</div>
                                        <p class="text-xs text-gray-600">您的账号刚刚从新设备登录：</p>
                                    </div>
                                </div>
                                <div class="ml-11">
                                    <div class="text-sm mb-1"><strong>设备:</strong> Chrome on Windows 10</div>
                                    <div class="text-sm mb-1"><strong>位置:</strong> 北京, 中国 (IP: 192.168.1.100)</div>
                                    <div class="text-sm"><strong>时间:</strong> 2023-05-15 14:30:25</div>
                                </div>
                                <div class="text-xs text-gray-500 mt-3">如果您不认识此活动，请立即更改密码。</div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-8">
                        <h3 class="text-xl font-semibold mb-4 flex items-center">
                            <i class="fas fa-users-cog text-blue-500 mr-2"></i>
                            设备管理界面示例
                        </h3>
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <div class="bg-gray-100 px-4 py-3 border-b border-gray-200 flex justify-between items-center">
                                <div class="font-medium">已登录设备</div>
                                <div class="text-sm text-blue-600 cursor-pointer hover:underline">查看全部</div>
                            </div>
                            <div class="divide-y divide-gray-200">
                                <!-- Device 1 -->
                                <div class="p-4 flex items-center">
                                    <div class="bg-blue-100 text-blue-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
                                        <i class="fas fa-mobile-alt"></i>
                                    </div>
                                    <div class="flex-grow">
                                        <div class="font-medium">iPhone 13 Pro</div>
                                        <div class="text-sm text-gray-600">iOS 15.4 • 北京, 中国 • 当前设备</div>
                                    </div>
                                    <div class="text-sm text-gray-500">今天 10:15</div>
                                </div>
                                <!-- Device 2 -->
                                <div class="p-4 flex items-center">
                                    <div class="bg-gray-100 text-gray-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
                                        <i class="fas fa-laptop"></i>
                                    </div>
                                    <div class="flex-grow">
                                        <div class="font-medium">MacBook Pro</div>
                                        <div class="text-sm text-gray-600">macOS 12.3 • 上海, 中国</div>
                                    </div>
                                    <button class="text-sm text-red-500 hover:text-red-700">退出</button>
                                </div>
                                <!-- Device 3 -->
                                <div class="p-4 flex items-center">
                                    <div class="bg-gray-100 text-gray-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
                                        <i class="fas fa-tablet-alt"></i>
                                    </div>
                                    <div class="flex-grow">
                                        <div class="font-medium">iPad Air</div>
                                        <div class="text-sm text-gray-600">iPadOS 15.4 • 广州, 中国</div>
                                    </div>
                                    <button class="text-sm text-red-500 hover:text-red-700">退出</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <hr class="section-divider my-12">

        <!-- Section 5 -->
        <div class="grid md:grid-cols-12 gap-8 mb-16">
            <div class="md:col-span-4">
                <div class="sticky top-8">
                    <span class="text-blue-500 font-bold text-sm tracking-wider mb-2 inline-block">05</span>
                    <h2 class="text-3xl font-bold mb-4">综合示例</h2>
                    <p class="text-gray-600 mb-4">基于 OAuth 2.0 的简单示例，演示如何处理多个设备登录和会话管理。</p>
                    <div class="flex space-x-2">
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Java</span>
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">OAuth 2.0</span>
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">令牌管理</span>
                    </div>
                </div>
            </div>
            <div class="md:col-span-8">
                <div class="bg-white rounded-xl shadow-sm p-8 card-hover">
                    <div class="flex items-center mb-6">
                        <div class="bg-blue-500 text-white rounded-lg p-3 mr-4">
                            <i class="fas fa-code text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold">OAuth 2.0 多设备令牌管理示例</h3>
                            <p class="text-gray-600 text-sm">基于Java实现的简单令牌管理系统</p>
                        </div>
                    </div>
                    
                    <div class="bg-gray-800 rounded-lg overflow-hidden">
                        <div class="flex items-center px-4 py-2 bg-gray-700 text-gray-300">
                            <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                            <div class="w-3 h-3 bg-yellow-400 rounded-full mr-2"></div>
                            <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
                            <span class="text-sm">OAuth2TokenService.java</span>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto text-sm">
<code>/**
 * 处理多个设备登录的OAuth 2.0令牌管理
 */
public class OAuth2TokenService {
    // 存储所有设备的令牌
    private Map&lt;String, List&lt;String&gt;&gt; userTokens = new ConcurrentHashMap<>();
    
    /**
     * 为指定用户和设备生成新令牌
     */
    public String generateToken(String userId, String deviceId) {
        String token = UUID.randomUUID().toString();
        userTokens.computeIfAbsent(userId, k -> new CopyOnWriteArrayList<>())
                 .add(token);
        return token;
    }
    
    /**
     * 验证用户令牌有效性
     */
    public boolean validateToken(String userId, String token) {
        List&lt;String&gt; tokens = userTokens.get(userId);
        return tokens != null && tokens.contains(token);
    }
    
    /**
     * 使指定令牌无效
     */
    public void invalidateToken(String userId, String token) {
        List&lt;String&gt; tokens = userTokens.get(userId);
        if (tokens != null) {
            tokens.remove(token);
        }
    }
    
    /**
     * 注销用户所有设备的会话
     */
    public void logoutAllDevices(String userId) {
        userTokens.remove(userId);
    }
    
    /**
     * 获取用户所有活跃令牌
     */
    public List&lt;String&gt; getActiveTokens(String userId) {
        return userTokens.getOrDefault(userId, Collections.emptyList());
    }
}</code></pre>
                    </div>

                    <div class="mt-6">
                        <h4 class="font-semibold text-lg mb-3 flex items-center">
                            <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                            关键点说明
                        </h4>
                        <div class="grid md:grid-cols-2 gap-4">
                            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                                <div class="font-medium mb-2 text-blue-600">线程安全设计</div>
                                <ul class="text-gray-700 text-sm space-y-1">
                                    <li>使用ConcurrentHashMap保证线程安全</li>
                                    <li>CopyOnWriteArrayList避免并发修改异常</li>
                                    <li>所有方法都是同步的</li>
                                </ul>
                            </div>
                            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                                <div class="font-medium mb-2 text-blue-600">扩展性考虑</div>
                                <ul class="text-gray-700 text-sm space-y-1">
                                    <li>可扩展为分布式缓存实现</li>
                                    <li>支持添加令牌过期时间检查</li>
                                    <li>可记录设备信息增强安全性</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="mt-8">
                        <h4 class="font-semibold text-lg mb-3 flex items-center">
                            <i class="fas fa-sitemap text-blue-500 mr-2"></i>
                            系统架构示意图
                        </h4>
                        <div class="mermaid">
                            graph TD
                                A[客户端设备1] -->|携带令牌1| B[API网关]
                                C[客户端设备2] -->|携带令牌2| B
                                D[客户端设备3] -->|携带令牌3| B
                                B --> E[认证服务]
                                E -->|验证令牌| F[(Redis缓存)]
                                B -->|转发请求| G[微服务1]
                                B -->|转发请求| H[微服务2]
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Conclusion -->
        <div class="bg-white rounded-xl shadow-sm p-8 mb-16 text-center">
            <div class="max-w-2xl mx-auto">
                <div class="text-blue-500 text-5xl mb-6">
                    <i class="fas fa-check-circle"></i>
                </div>
                <h2 class="text-3xl font-bold mb-4">构建安全的会话管理体系</h2>
                <p class="text-gray-700 mb-6">通过合理的会话管理和令牌处理策略，可以有效地解决单点登录和多设备登录问题。关键在于平衡用户体验与系统安全性，使用现代化的认证协议和最佳实践，构建可靠的身份验证和会话管理系统。</p>
                <button class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-all">
                    <i class="fas fa-book mr-2"></i>了解更多最佳实践
                </button>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="text-center">
                <div class="text-2xl font-bold text-white mb-2">技术小馆</div>
                <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:text-blue-300 transition">http://www.yuque.com/jtostring</a>
                <div class="flex justify-center space-x-4 mt-6">
                    <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                </div>
            </div>
            <div class="text-center text-sm mt-8 text-gray-500">
                &copy; 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 简单的滚动动画
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```